<template>
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,key) in slides" :key="key">
          <img :src="item.dataURL">
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>

</template>

<script>
  export default {
    props: {
      slides: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          slidesPerGroup: 3,
          loop: true,
          loopFillGroupWithBlank: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>
<style>
  .swiper-container{
    width: 400px;
    overflow: hidden;
    padding: 0 25px!important;
    margin: 0!important;
    box-sizing: border-box;
  }
  .swiper-button-next{
    right: 0!important;
  }
  .swiper-button-prev{
    left: 0!important;
  }
</style>
